import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Form, message, InputNumber, Input, Upload, Button } from 'antd'
import _ from 'loadsh'
import { UploadOutlined } from '@ant-design/icons'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import CaseArbitratorSelector from '@components/CaseArbitratorSelector/Index'
import { awaitWrap, getUploadProps } from '@js/tool'
import { getBeginTime, getEndDate } from './ajax'
import DateShower from './DateShower'
import style from './Step.module.less'
const { Item } = Form
const { TextArea } = Input
class StepOneInput extends Component {
  state = {
    dictionaries: {},
    keyTitleMap: {},
    fileList: [],
    beginTime: undefined
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 获取审限届满之日
  async getBeginTime () {
    const [e, d] = await awaitWrap(getBeginTime(this.props.caseDetail.id))
    if (e) {
      return message.warning(e.message)
    }
    this.setState({
      beginTime: d
    })
    this.props.formRef.current.setFieldsValue({
      limitextended_begin_datetime: d
    })
  }

  // 改变延长天数，获取截止日期
  async changeDays (days) {
    const [e, d] = await awaitWrap(getEndDate(this.state.beginTime, parseInt(days)))
    if (e) {
      return message.warning(e.message)
    }
    this.props.formRef.current.setFieldsValue({
      limitextended_pre_end_datetime: d
    })
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
    this.getBeginTime()
  }

  render () {
    const { keyTitleMap } = this.state
    return (
      <div>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '120px' }} name='limitextended_submittal' label={keyTitleMap.limitextended_submittal} rules={[{ required: true, message: `${keyTitleMap.limitextended_submittal}不能为空` }]}>
              <CaseArbitratorSelector caseid={this.props.caseDetail.id} mode='multiple' />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '120px' }} name='limitextended_begin_datetime' label={keyTitleMap.limitextended_begin_datetime} rules={[{ required: true, message: `${keyTitleMap.limitextended_begin_datetime}不能为空` }]}>
              <DateShower />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '120px' }} name='limitextended_pre_days' label={keyTitleMap.limitextended_pre_days} rules={[{ required: true, message: `${keyTitleMap.limitextended_pre_days}不能为空` }]}>
              <InputNumber className={style.full} placeholder='请输入' min={1} precision={0} onChange={_.debounce(this.changeDays.bind(this), 1000)} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '120px' }} name='limitextended_pre_end_datetime' label={keyTitleMap.limitextended_pre_end_datetime} rules={[{ required: true, message: `${keyTitleMap.limitextended_pre_end_datetime}不能为空` }]}>
              <DateShower />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell style={{ width: '65%' }}>
            <Item labelCol={{ flex: '120px' }} name='limitextended_case_info' label={keyTitleMap.limitextended_case_info}>
              <TextArea placeholder='请输入' size={3} />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell style={{ width: '65%' }}>
            <Item labelCol={{ flex: '120px' }} name='limitextended_info' label={keyTitleMap.limitextended_info}>
              <TextArea placeholder='请输入' size={3} />
            </Item>
          </Cell>
        </Line>
        <Line>
          <Cell style={{ width: '65%' }}>
            <Item labelCol={{ flex: '120px' }} name='file' label={keyTitleMap.limitextended_fileid}>
              <Upload {...getUploadProps.call(this, this.props.formRef)}>
                <Button disabled={this.state.fileList.length > 9}>
                  <UploadOutlined /> 上传文件
                </Button>
              </Upload>
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

StepOneInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object
}

StepOneInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {}
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(StepOneInput)
